<template>
  <div class="teaching-mission-list">
    <el-table
      :data="missions"
      style="width: 100%"
      @row-click="handleMissionSelect"
      highlight-current-row
      :row-class-name="getMissionRowClass"
      v-loading="loading"
    >
      <el-table-column label="课程名称" prop="courseName" min-width="150" resizable />
      <el-table-column label="课程编码" prop="courseCode" width="120" resizable />
      <el-table-column label="教学任务名称" prop="name" min-width="160" resizable>
        <template #default="scope">
          <span>{{ scope.row.name || '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="队次" min-width="120" resizable>
        <template #default="scope">
          <div v-if="scope.row.classNames && scope.row.classNames.length > 0">
            <el-tag 
              v-for="(className, index) in scope.row.classNames" 
              :key="index" 
              size="small" 
              style="margin-right: 5px; margin-bottom: 2px;"
            >
              {{ className }}
            </el-tag>
          </div>
          <span v-else class="text-muted">未分配</span>
        </template>
      </el-table-column>
      <el-table-column label="教师" width="120" resizable>
        <template #default="scope">
          <div v-if="scope.row.teacherNames && scope.row.teacherNames.length > 0">
            <span>{{ scope.row.teacherNames.join(', ') }}</span>
          </div>
          <span v-else class="text-muted">未分配</span>
        </template>
      </el-table-column>
      <el-table-column label="学员数" width="80" resizable>
        <template #default="scope">
          <span>{{ scope.row.studentCount !== undefined ? scope.row.studentCount : '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="考核组成" width="120" resizable>
        <template #default="scope">
          <el-tag v-if="scope.row.hasExamParts" type="success" size="small">
            已完成(100%)
          </el-tag>
          <el-tag v-else-if="scope.row.totalProportion > 0" type="warning" size="small">
            未完成({{ scope.row.totalProportion }}%)
          </el-tag>
          <el-tag v-else type="danger" size="small">
            未设置
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120" fixed="right" resizable>
        <template #default="scope">
          <el-button 
            type="primary" 
            size="small" 
            @click.stop="handleMissionSelect(scope.row)"
          >
            修改
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
defineProps({
  missions: {
    type: Array,
    default: () => []
  },
  loading: {
    type: Boolean,
    default: false
  },
  selectedMission: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['mission-select'])

const handleMissionSelect = (row) => {
  emit('mission-select', row)
}

const getMissionRowClass = ({ row }) => {
  return row.hasExamParts ? 'mission-configured' : 'mission-unconfigured'
}
</script>

<style scoped>
.teaching-mission-list {
  width: 100%;
}

.text-muted {
  color: #909399;
}

:deep(.mission-configured) {
  background-color: #f0f9ff;
}

:deep(.mission-unconfigured) {
  background-color: #fef2f2;
}

:deep(.el-table__row:hover) {
  background-color: #f5f7fa !important;
}
</style>
